<template>
    <div class="login-registration">
        <header>
            <div class="logo">
                <img src="@/assets/img/read.png" alt="" />
                <h1>每日阅读</h1>
            </div>
            <h3>爱上阅读，改变生活</h3>
        </header>
        <main>
            <ul>
                <li @click="setType('sign-in')" :class="type == 'sign-in' ? 'active' : ''">登录</li>
                <li @click="setType('register')" :class="type == 'register' ? 'active' : ''">注册</li>
            </ul>
            <div class="Sign-in from" v-if="type == 'sign-in'">
                <el-input class="inp" v-model="SAccount" placeholder="请输入手机号" clearable :suffix-icon="Phone" />
                <el-input class="inp" v-model="SPassWord" type="password" placeholder="请输入用户密码" show-password clearable :suffix-icon="Lock" />
                <!-- <div class="functions inp">
                    <div>
                        <el-checkbox v-model="autoL" label="自动登录" name="type" text-color="#8076a3" fill="#8076a3" />
                    </div>
                    <p>忘记密码 ？</p>
                </div> -->
                <el-button type="primary" color="#8076a3" @click="goSignIn">登录</el-button>
            </div>
            <div class="register from" v-else>
                <el-input class="inp" v-model="RPassName" placeholder="请输入账户名" clearable :suffix-icon="User" />
                <el-alert type="info" show-icon :closable="false">
                    <p>用户名需6-12个字符</p>
                </el-alert>
                <el-input class="inp" v-model="RAccount" placeholder="请输入手机号码" clearable :suffix-icon="Phone" />
                <el-alert type="info" show-icon :closable="false">
                    <p>请输入11位数的手机号码</p>
                </el-alert>
                <el-input class="inp" v-model="RPassWord" type="password" placeholder="请输入用户密码" show-password clearable :suffix-icon="Lock" />
                <el-alert type="info" show-icon :closable="false">
                    <p>密码必须以字母开头，长度在6~18之间，只能包含字母、数字和下划线</p>
                </el-alert>
                <el-input class="inp" v-model="AgPassWord" type="password" placeholder="请再次输入密码" show-password clearable :suffix-icon="Lock" />
                <el-button type="primary" color="#8076a3" @click="registerApi">注册</el-button>
            </div>
        </main>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { Phone, User, Lock } from "@element-plus/icons-vue";
import { signIn, register } from "@/api/index";
import axios from "axios";
import { useRouter } from "vue-router";
// import { useStore } from "vuex";
let type = ref("sign-in");
const SAccount = ref("");
const SPassWord = ref("");
const RPassName = ref("");
const RAccount = ref("");
const RPassWord = ref("");
const AgPassWord = ref("");
let autoL = ref(false);
let router = useRouter();
// let store = useStore();
let setType = (t) => {
    type.value = t;
    SAccount.value = "";
    SPassWord.value = "";
    RPassName.value = "";
    RAccount.value = "";
    RPassWord.value = "";
    AgPassWord.value = "";
};
//登录成功账号存cookie
let setcok = (account) => {
    let times = new Date().setTime(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);
    document.cookie = `userAccount=${account};expires=` + times;
    //判断自动登录
    if (autoL.value) {
        document.cookie = `autoL=${account};expires=` + times;
    } else {
        document.cookie = "autoL=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }
};
//判断是否是自动登录或记住账号密码
let cok = () => {
    if (document.cookie) {
        let arr = document.cookie.split("; ");
        let obj = {};
        arr.forEach((item) => {
            let keyName = item.split("=")[0];
            let keyVal = item.split("=")[1];
            obj[keyName] = keyVal;
        });
        if (obj.autoL) {
            autoL.value = true;
            router.replace({ name: "home" });
            ElMessage({
                message: "欢迎进入每日阅读后台管理系统",
                type: "success",
            });
            ElMessage({
                message: "自动登录",
                type: "success",
            });
        } else {
            if (obj.rem) {
                rem.value = true;
            }
        }
    }
};
cok();
// 登录
let goSignIn = () => {
    if (!SAccount.value) {
        ElMessage.error("请输入手机号码");
        return;
    }
    if (!SPassWord.value) {
        ElMessage.error("请输入密码");
        return;
    }
    axios(signIn(SAccount.value, SPassWord.value, "b")).then(({ data }) => {
        if (data.s != 200) {
            ElMessage.error(data.m);
        } else {
            localStorage.setItem("BToken", data.token);
            setcok(SAccount.value);
            ElMessage({
                message: "欢迎进入每日阅读后台管理系统",
                type: "success",
            });
            ElMessage({
                message: data.m,
                type: "success",
            });
            SAccount.value = "";
            SPassWord.value = "";
            router.push({ name: "home" });
        }
    });
};
// 注册
let registerApi = () => {
    if (!RPassName.value) {
        ElMessage.error("用户名不能为空");
        return;
    }
    if (!RAccount.value) {
        ElMessage.error("手机号码不能为空");
        return;
    }
    if (!RPassWord.value) {
        ElMessage.error("密码不能为空");
        return;
    }
    if (!AgPassWord.value) {
        ElMessage.error("请再次输入密码");
        return;
    }
    if (RPassWord.value != AgPassWord.value) {
        ElMessage.error("两次密码不一致");
        return;
    }
    axios
        .post(register(), {
            passname: RPassName.value,
            account: RAccount.value,
            password: RPassWord.value,
            type: "b",
        })
        .then(({ data }) => {
            if (data.s == 200) {
                ElMessage({
                    message: data.m,
                    type: "success",
                });
                type.value = "sign-in";
                RPassName.value = "";
                RAccount.value = "";
                RPassWord.value = "";
                AgPassWord.value = "";
            } else {
                ElMessage.error(data.m);
            }
        })
        .catch(({ err }) => {
            ElMessage.error(err.m);
        });
};
</script>

<style lang="scss" scoped>
@font-face {
    font-family: "clzt";
    src: url("@/assets/fonts/ChaoZiSheJiYingJianFan-Shan\(CHAO-ShadowGBT-Flash\)-2.ttf");
}
.login-registration {
    width: 400px;
    margin: 9.375rem auto 0;
    padding: 20px;
    header {
        .logo {
            display: flex;
            height: 32px;
            align-items: end;
            img {
                width: 32px;
                height: 32px;
            }
            h1 {
                font-family: "clzt";
                color: #8076a3;
                font-size: 36px;
                font-weight: 600;
                text-align: end;
            }
        }
        h3 {
            text-align: center;
            font-family: "clzt";
            font-size: 20px;
        }
    }
    main {
        ul {
            margin-top: 1.25rem;
            display: flex;
            justify-content: space-around;
            li {
                text-align: center;
                font-weight: 600;
                height: 1.5625rem;
                line-height: 1.5625rem;
                border-bottom: transparent 3px solid;
                width: 30%;
            }
            .active {
                color: #8076a3;
                border-bottom: #8076a3 3px solid;
            }
        }
        .from {
            width: 100%;
            .inp {
                margin-top: 0.625rem;
            }
            .functions {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                    font-size: 14px;
                    color: #409eff;
                }
            }
            button {
                margin-top: 0.625rem;
                width: 100%;
            }
        }
    }
}
</style>
